<template>
    <div>
        <el-form :model="formData" label-position="labelPosition" inline="true" ref="formData" labelWidth="120px"
                 class="demo-form-inline" style="margin-left: 20px;margin-right: 20px">
            <el-col :span="8">
                <el-form-item label="学生姓名" >
                    <el-input size="mini" v-model="formData.name" placeholder="必填"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="学生性别" >
                    <el-select size="mini" v-model="formData.sex" placeholder="请选择性别">
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="出生日期" >
                    <el-date-picker size="mini"
                                    v-model="formData.birthday"
                                    align="right"
                                    type="date"
                                    style="width: 180px"
                                    placeholder="开始日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="就读学校" >
                    <el-input size="mini" v-model="formData.educateschool" style="width: 100%;"
                              placeholder="必填"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="父亲姓名" >
                    <el-input size="mini" v-model="formData.father" placeholder="父亲姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="父亲电话" >
                    <el-input size="mini" v-model="formData.fathertel" placeholder="父亲电话"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="母亲姓名" >
                    <el-input size="mini" v-model="formData.mother" placeholder="母亲姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="母亲电话" >
                    <el-input size="mini" v-model="formData.mothertel" placeholder="目前电话"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="家庭住址" >
                    <el-input size="mini" v-model="formData.address" style="width: 400px"
                              placeholder="家庭住址"></el-input>
                </el-form-item>
            </el-col>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="所属校区" >
                        <el-select size="mini" v-model="formData.schoolid" @change="schoolchange"
                                   placeholder="所属校区">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属老师" >
                        <el-select size="mini" v-model="formData.eid" placeholder="所属老师">
                            <el-option
                                v-for="item in empsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="学校顾问" >
                        <el-select size="mini" v-model="adviserschool" @change="adviserschoolchange" placeholder="选择学校">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="" >
                        <el-select size="mini" v-model="adviseremp" placeholder="选择顾问老师" @change="selectAdviser">
                            <el-option
                                v-for="item in adviserList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="" >
                        <el-input size="mini" v-model="formData.adviser" placeholder="学习顾问">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-form-item label="报名渠道" >
                    <el-select size="mini" v-model="formData.channel" placeholder="报名渠道">
                        <el-option
                            v-for="item in channelList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="学生备注" >
                    <el-input size="mini" v-model="formData.comments" placeholder="备注,内部可见"></el-input>
                </el-form-item>

                <el-form-item label="上课时段" v-if="inputdis([2,3,4])">
                    <el-select size="mini" v-model="formData.periodid" placeholder="上课时段">
                        <el-option
                            v-for="item in periodList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>
            <el-col :span="8">
                <el-form-item label="试课日期" v-if="inputdis([2])">
                    <el-date-picker size="mini"
                                    v-model="formData.trydate"
                                    align="right"
                                    type="date"
                                    placeholder="开始日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
                <el-form-item label="交费日期" >
                    <el-date-picker size="mini"
                                    v-model="formData.chargedate"
                                    align="right"
                                    type="date"
                                    placeholder="正式交费日期"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="正式日期" >
                    <el-date-picker size="mini"
                                    v-model="formData.beginTime"
                                    align="right"
                                    type="date"
                                    placeholder="正式上课日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="交费金额" >
                    <el-input size="mini" v-model="formData.chargecash" placeholder="交费金额"></el-input>
                </el-form-item>
            <el-row>
            <el-col :span="8">
                <el-form-item label="交费类型" >
                    <el-select size="mini" v-model="formData.othercharge" placeholder="选择交费类型"></el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="交费类型" >
                    <el-select size="mini" v-model="formData.paytype" placeholder="选择交费类型"></el-select>
                </el-form-item>
            </el-col>
            </el-row>


            <el-col :span="8">
                <el-form-item label="本轮课时" >
                    <el-input size="mini" v-model="formData.timesofclass" placeholder="本轮课时"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="每周课时" >
                    <el-input size="mini" v-model="formData.timesofweek" placeholder="每周课时"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="截至日期" >
                    <el-date-picker size="mini"
                                    v-model="formData.endTime"
                                    align="right"
                                    type="date"
                                    placeholder="学习截至日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="15">
                <el-form-item label="缴费单据备注" >
                    <el-input size="mini" v-model="formData.ordercomments" style="width: 400px"
                              placeholder="缴费单据备注"></el-input>
                </el-form-item>
            </el-col>
            <el-col offset="10" :span="10">
                <el-button @click="testPrint('formData')" type="primary">上传学生文档<i
                    class="el-icon-upload el-icon--right"></i></el-button>
            </el-col>

        </el-form>


    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import {addStudent} from '@/api/getData'
    import {baseUrl, baseImgPath} from '@/config/env'
    import ElCol from "element-ui/packages/col/src/col";
    import ElRow from "element-ui/packages/row/src/row";
    import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";

    export default {
        computed: {
            ...mapGetters(['schoolList', 'channelList', 'periodList', 'empschoolMap'])
        },
        data() {
            return {
                empsList: [],
                adviserList: [],
                usertype: 1,
                city: {},
                adviserschool: '',
                adviseremp: '',
                formData: {
                    name: '',
                    sex: '', //地址
                    birthday: '',
                    educateschool: '',
                    father: '', //介绍
                    fathertel: '',
                    mother: '',
                    mothertel: '', //运费
                    address: '', //起价
                    schoolid: '',
                    eid: '',
                    adviser: '',
                    channel: '',
                    chargecash: '',
                    paytype: '',
                    beginTime: '',
                    endTime: '',
                    trydate: '',
                    chargedate: '',
                    timesofclass: '',
                    timesofweek: '',
                    ordercomments: '',

                },
                rules: {
                    name: [
                        {required: true, message: '请输入店铺名称', trigger: 'blur'},
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入联系电话'},
                        {type: 'number', message: '电话号码必须是数字'}
                    ],
                },
                options: [{
                    value: '满减优惠',
                    label: '满减优惠'
                }, {
                    value: '优惠大酬宾',
                    label: '优惠大酬宾'
                }, {
                    value: '新用户立减',
                    label: '新用户立减'
                }, {
                    value: '进店领券',
                    label: '进店领券'
                }],
                activityValue: '满减优惠',
                activities: [{
                    icon_name: '减',
                    name: '满减优惠',
                    description: '满30减5，满60减8',
                }],
                baseUrl,
                baseImgPath,
                categoryOptions: [],
                selectedCategory: ['快餐便当', '简餐']
            }
        },

        props: ['usertypepage'],
        components: {
            ElInput,
            ElOption,
            ElButton,
            ElRow,
            ElCol,
            headTop,
        },
        mounted() {
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps']),
            inputdis(v) {
                return v.indexOf(this.usertypepage) != -1;

            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            selectAdviser(key) {
                this.formData.adviser = key;
            },

            adviserschoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.adviserList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.adviserList.push(item);
                    });
                }
            },


            testPrint(forName) {
                try {
                    this.$emit('feeprint', '1');
                } catch (e) {
                    console.log('feeprint' + e);
                }
            },


            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        Object.assign(this.formData, {activities: this.activities}, {
                            category: this.selectedCategory.join('/')
                        })
                        try {
                            let result = await addShop(this.formData);
                            if (result.status == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.formData = {
                                    name: '',
                                    sex: '',
                                    birthday: '',
                                    educateschool: '',
                                    father: '',
                                    fathertel: '',
                                    mother: '',
                                    mothertel: '',
                                    address: '',
                                    schoolid: '',
                                    eid: '',
                                    adviser: '',
                                    channel: '',
                                    chargecash: '',
                                    paytype: '',
                                    beginTime: '',
                                    endTime: '',
                                    trydate: '',
                                    chargedate: '',
                                    timesofclass: '',
                                    timesofweek: '',
                                    ordercomments: '',

                                };
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: result.message
                                });
                            }
                            console.log(result)
                        } catch (err) {
                            console.log(err)
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '请检查输入是否正确',
                            offset: 100
                        });
                        return false;
                    }
                });
            },
        },
        created() {

            /* if (this.periodList.length == 0) {
                 this.getPeriod();
             }*/
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .button_submit {
        text-align: center;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .el-form-item {
        margin-bottom: 5px;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
</style>
